Strategi Cache React Suspense: Menguasai Manajemen Cache Pemuatan Data

React Suspense, diperkenalkan sebagai bagian dari fitur mode konkuren React, menyediakan cara deklaratif untuk menangani status pemuatan di aplikasi Anda. Dikombinasikan dengan strategi caching yang kuat, Suspense dapat secara signifikan meningkatkan kinerja yang dirasakan dan pengalaman pengguna dengan mencegah permintaan jaringan yang tidak perlu dan menyediakan akses langsung ke data yang sebelumnya diambil. Panduan ini mendalami implementasi teknik pemuatan data dan manajemen cache yang efektif menggunakan React Suspense.

Memahami React Suspense

Pada intinya, React Suspense adalah komponen yang membungkus bagian-bagian aplikasi Anda yang mungkin menangguhkan, yang berarti mereka mungkin belum siap untuk dirender karena menunggu data dimuat. Ketika sebuah komponen menangguhkan, Suspense menampilkan UI fallback (misalnya, pemutar pemuatan) sampai data tersedia. Setelah data siap, Suspense menukar fallback dengan komponen aktual.

Manfaat utama menggunakan React Suspense meliputi:

• Status Pemuatan Deklaratif: Tentukan status pemuatan langsung di pohon komponen Anda tanpa perlu mengelola flag boolean atau logika status yang kompleks.
• Pengalaman Pengguna yang Ditingkatkan: Berikan umpan balik langsung kepada pengguna saat data dimuat, mengurangi latensi yang dirasakan.
• Pembagian Kode: Muat komponen dan bundel kode secara malas dengan mudah, selanjutnya meningkatkan waktu pemuatan awal.
• Pengambilan Data Konkuren: Ambil data secara konkuren tanpa memblokir thread utama, memastikan UI yang responsif.

Kebutuhan akan Caching Data

Sementara Suspense menangani status pemuatan, ia tidak secara inheren mengelola caching data. Tanpa caching, setiap render ulang atau navigasi ke bagian aplikasi yang sebelumnya dikunjungi dapat memicu permintaan jaringan baru, yang mengarah ke:

• Peningkatan Latensi: Pengguna mengalami penundaan saat menunggu data diambil lagi.
• Beban Server yang Lebih Tinggi: Permintaan yang tidak perlu membebani sumber daya server dan meningkatkan biaya.
• Pengalaman Pengguna yang Buruk: Status pemuatan yang sering mengganggu alur pengguna dan menurunkan pengalaman keseluruhan.

Mengimplementasikan strategi caching data sangat penting untuk mengoptimalkan aplikasi React Suspense. Cache yang dirancang dengan baik dapat menyimpan data yang diambil dan menyajikannya langsung dari memori pada permintaan berikutnya, menghilangkan kebutuhan untuk panggilan jaringan yang berulang.

Mengimplementasikan Cache Dasar dengan React Suspense

Mari kita buat mekanisme caching sederhana yang terintegrasi dengan React Suspense. Kita akan menggunakan Map JavaScript untuk menyimpan data cache kita dan fungsi `wrapPromise` kustom untuk menangani pengambilan data asinkron.

1. Fungsi `wrapPromise`

Fungsi ini mengambil janji (hasil dari operasi pengambilan data Anda) dan mengembalikan objek dengan metode `read()`. Metode `read()` baik mengembalikan data yang diselesaikan, melempar janji jika masih tertunda, atau melempar kesalahan jika janji ditolak. Ini adalah mekanisme inti yang memungkinkan Suspense bekerja dengan data asinkron.

            function wrapPromise(promise) {
 let status = 'pending';
 let result;
 let suspender = promise.then(
 r => {
 status = 'success';
 result = r;
 },
 e => {
 status = 'error';
 result = e;
 }
 );

 return {
 read() {
 if (status === 'pending') {
 throw suspender;
 } else if (status === 'error') {
 throw result;
 } else if (status === 'success') {
 return result;
 }
 },
 };
}

            

              
                Copy
              
            
          

2. Objek Cache

Objek ini menyimpan data yang diambil menggunakan Map JavaScript. Ia juga menyediakan fungsi `load` yang mengambil data (jika belum ada di cache) dan membungkusnya dengan fungsi `wrapPromise`.

            function createCache() {
 let cache = new Map();

 return {
 load(key, promise) {
 if (!cache.has(key)) {
 cache.set(key, wrapPromise(promise()));
 }
 return cache.get(key);
 },
 };
}

            

              
                Copy
              
            
          

3. Integrasi dengan Komponen React

Sekarang, mari kita gunakan cache kita di komponen React. Kita akan membuat komponen `Profile` yang mengambil data pengguna menggunakan fungsi `load`.

            import React, { Suspense, useRef } from 'react';

const dataCache = createCache();

function fetchUserData(userId) {
 return fetch(`https://api.example.com/users/${userId}`)
 .then(response => {
 if (!response.ok) {
 throw new Error(`HTTP error! Status: ${response.status}`);
 }
 return response.json();
 });
}

function ProfileDetails({ userId }) {
 const userData = dataCache.load(userId, () => fetchUserData(userId));
 const user = userData.read();

 return (
 

 
{user.name}
 
Email: {user.email}
 
Location: {user.location}
 
 );
}

function Profile({ userId }) {
 return (
 Loading profile...